<template>
  <basic-container :btnFlag = true>
    <div class="card-border">
      <!--<div class="step-group" style="margin: 20px">-->
        <!--<el-steps :active="2">-->
          <!--<el-step title="申请" icon="el-icon-edit"></el-step>-->
          <!--<el-step title="初审" icon="el-icon-upload"></el-step>-->
          <!--<el-step title="审核" icon="el-icon-edit"></el-step>-->
          <!--<el-step title="清单报批" icon="el-icon-upload"></el-step>-->
          <!--<el-step title="政府批复" icon="el-icon-picture"></el-step>-->
          <!--<el-step title="赋码反馈" icon="el-icon-upload"></el-step>-->
        <!--</el-steps>-->
      <!--</div>-->
      <card-header :header-data="headerData"></card-header>
      <el-collapse v-model="activeNames" accordion style="padding: 12px;margin-top:20px;padding-bottom: 0px;">
        <transition name="fade1" v-if="viewOrno">
          <div v-if="!showall">
            <div :class="{showall:true,active:showall}">
                <bostech-detail :detail-data="detailData"></bostech-detail>
            </div>
          </div>
        </transition>
        <transition name="fade" v-if="viewOrno">
          <div v-if="showall">
            <div :class="{showall:true,active:showall}">
                <bostech-detail :detail-data="detailData"></bostech-detail>
            </div>
          </div>
        </transition>
        <div class="collapse-title" :class="{active:showall}" @click="showall=!showall" v-if="viewOrno">
          <img v-if="!showall" :src="`${publicPath}img/packdown.png`" class="collapse-title-img">
          <p v-if="!showall" class="collapse-title-text">展开更多</p>
          <img v-if="showall" :src="`${publicPath}img/packUp.png`" class="collapse-title-img">
          <p v-if="showall" class="collapse-title-text">收起</p>
        </div>

      <el-collapse-item name="4">
        <template slot="title">
          <div class="card-header collapse-header">
            <div class="head-title collapse-title">会商意见</div>
          </div>
        </template>
        <el-tabs style="padding: 12px;margin-top:20px;" v-if="msgFlag" v-model="activeName">
          <el-tab-pane
            :label="item.deptName"
            :name="item.topicId"
            v-for="(item,index) in msgList"
            :key="index"
            v-if="item.topicId==topicId">
            <msg-reply :msg-data="msgDataListtemp" @refreshMessage = "refreshMessage(item.topicId,item.deptName)"></msg-reply>
            <el-pagination
              @size-change="sizeChange"
              @current-change="onLoad"
              :current-page="pagetemp.currentPage"
              :page-size="pagetemp.pageSize"
              :total="pagetemp.total"
              :page-sizes="[10, 20, 30, 40 ,50 ,100]"
              layout="total, sizes, prev, pager, next, jumper"
              v-if="msgDataListtemp.length>0"
              class="paginationcss">
            </el-pagination>
            <div v-if="msgDataListtemp.length<=0" style="text-align: center;
          font-size: 18px;
          margin-top: 28px;">暂无数据</div>
          </el-tab-pane>
        </el-tabs>
        <div v-if="!msgFlag" style="text-align: center;font-size: 18px;margin-top: 20px;">
          暂无数据</div>
      </el-collapse-item>
      </el-collapse>
      <div class="consult-button">
        <!--<el-button type="warning" size="small" @click.stop="endDis()">结束会商</el-button>-->
        <el-button type="info" size="small" @click.stop="goBack()">关闭</el-button>
      </div>
    </div>
  </basic-container>
</template>
<script>
import chatMsg from '@/components/bostech/chat-msg';
import msgReply from '@/components/bostech/msg-reply';
import {projectEndDiscussion,projectDetail} from "@/api/planning/project";
import {messagePage} from '@/api/planning/message'
import getDetailData from "@/mixins/getDetailData";
import {PROJECT_DIC} from '@/const/dict'
import { mapGetters } from "vuex";
import {getfileinfopage,getfileinfo} from "@/api/system";
export default {
  name: "endDiscussion",
  mixins: [getDetailData()],
  components: {
    chatMsg,
    msgReply
  },
  computed: mapGetters([
    "userInfo"
  ]),
  watch: {
  },
  data() {
    return {
      publicPath: process.env.BASE_URL,
      msgListtemp:[],
      showall: false,//是否展开标志
      headerData:{
        title:'会商'
      },
      activeNames: ["1","4"],
      msgList:[],
      detailData:[],
      deptDataList: [],
      pitchOnValues: [],
      cachePitchOnValues:[],
      deptList:[],
      taskId:'',
      multiplefiles:[],
      msgFlag:false,
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      pagetemp: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      pageSizetemp:10,
      currenttemp:1,
      activeName: '',
      topicIdtemp:0,
      msgDataListtemp:[],
      topicId:0,
      viewOrno:true,
    };
  },
  created(){
    this.taskId = this.$route.params.id;
    this.registerinfoId = this.$route.query.registerinfoId;
    this.topicId = this.$route.query.topicId;
    if(this.$route.query.type!='B'){
      projectDetail(this.$route.query.registerinfoId).then(response => {
        this.getresultDetail(response);
      })
    }else {
      this.viewOrno = false;
      this.getMessageList();
    }

  },
  methods: {
    async  getresultDetail(response){
      if (response.data.code == '0') {
        var records = response.data.data;
        if(records.fileId!="" && records.fileId !=null){
          this.multiplefiles = [];
          this.multiplefiles = await this.getfileinfopagetemp(records);
        }
        this.getDetailDataMins(records);
        if(records.registerinfoTopicVOList.length>0){
          this.msgFlag = true;
          for(var i in records.registerinfoTopicVOList){
            this.getMessage(records.registerinfoTopicVOList[i],i);
          }
        }
      }
    },
    getfileinfopagetemp(records){
      return new Promise((resolve, reject) => {
        if(records.fileId!="" && records.fileId !=null){
          getfileinfopage(Object.assign({
            current: 1,
            size: 100,
            fileIds:records.fileId
          })).then(response => {
            var multiplefiles = response.data.data.records;
            resolve(multiplefiles);
          }).catch(
          )
        }
      })
    },
    goBack() {
      this.$router.go(-1);
    },
    refresh(){
      this.msgList=[];
      projectDetail(this.registerinfoId).then(response => {
        if (response.data.code == '0') {
          var records = response.data.data;
          if(records.registerinfoTopicVOList.length>0){
            this.msgFlag = true;
            for(var i in records.registerinfoTopicVOList){
              this.getMessage(records.registerinfoTopicVOList[i],i);
            }
          }

        }
      })
    },
    getMessage(obj,item){
        if(obj.topicId == this.topicId){
          messagePage(Object.assign({
            current: 1,
            size: 10,
            topicId:this.topicId,
            ascs:'send_time'
          })).then(response => {
            if (response.data.code == 0) {
              var record = response.data.data.records;
              var pagetemp = {};
              pagetemp.currentPage = response.data.data.current;
              pagetemp.pageSize = response.data.data.size;
              pagetemp.total = response.data.data.total;
              this.activeName = obj.topicId; //tabs默认显示第一个部门
              this.topicIdtemp = obj.topicId;
              this.pagetemp = pagetemp;
              this.putList(record,obj.deptName,obj.topicId,pagetemp);
            }
          })
        }

    },

    getMessageList(){
      this.msgFlag = true;
          messagePage(Object.assign({
            current: 1,
            size: 10,
            topicId:this.topicId,
            ascs:'send_time'
          })).then(response => {
            if (response.data.code == 0) {
              var record = response.data.data.records;
              var pagetemp = {};
              pagetemp.currentPage = response.data.data.current;
              pagetemp.pageSize = response.data.data.size;
              pagetemp.total = response.data.data.total;
              this.activeName = this.topicId; //tabs默认显示第一个部门
              this.topicIdtemp = this.topicId;
              this.pagetemp = pagetemp;
              var deptname = '省发改委规划管理员';
              this.putList(record,deptname,this.topicId,pagetemp);
            }
          })


    },
    endDis(){
      this.$confirm("确定结束会商?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        // 提交代码
        projectEndDiscussion({taskId:this.taskId}).then(response => {
          if (response.data.code == 0) {
            this.$notify({
              title: "成功",
              message: "结束会商成功",
              type: "success",
              duration: 2000
            });
            this.$router.go(-1);
          }
        });
      });
    },
    putList(record,deptName,topicId,pagetemp){
      this.msgListtemp=[];

      if(record!=null){
        this.recursive(record);    //递归消息放入消息列msgListtemp中
      }

      var msgMap = {
        deptName:deptName,
        msgDataList:this.msgListtemp,
        topicId:topicId,
        pagetemp:pagetemp,
      };
      if(record!=null){
        this.msgDataListtemp = msgMap.msgDataList;
      }

      this.msgList.push(msgMap)

    },
    recursive(record,deptName){
      for(var i in record){
        var flag = false;
        var src = this.publicPath + 'img/user2.jpg';
        if(record[i].senderId == this.userInfo.userId){
          flag = true;
          src = this.publicPath + 'img/user1.jpg'
        }

        // if(record[i].topicId != this.topicId){
        //   flag = false;
        // }


        if(record[i].parentId!==null){
          var righttemp = 1;     //是子消息
        }else {
          righttemp = 0;     //不是子消息
        }
        var msgDataMap = {
          orgName:record[i].senderNickname,
          nickName:record[i].senderNickname?record[i].senderNickname.substring(0,2):'',
          // orgName:record[i].username,
          msgTime:record[i].sendTime,
          msgContent:record[i].content,
          replyFlag:flag,
          src: src,
          senderId:record[i].senderId,
          topicId:record[i].topicId,
          messageId:record[i].messageId,
          rightaway:righttemp,
          fileId:record[i].fileId,
          filenametemp:record[i].fileFullName,
        };
        this.msgListtemp.push(msgDataMap);
        if(record[i].children!==null){ //当还有子消息时继续递归
          this.recursive(record[i].children);
        }
      }
    },
    //当点击显示第几页时触发
    onLoad(page){
      this.currenttemp=page;
      messagePage(Object.assign({
        current: page,// 当前页数
        size: this.pageSizetemp,// 每页显示多少条
        topicId:this.topicIdtemp,
        ascs:'send_time'
      })).then(response => {
        if (response.data.code == 0) {
          var record = response.data.data.records;
          this.page.currentPage = response.data.data.current;
          this.page.pageSize = response.data.data.size;
          this.page.total = response.data.data.total;

          this.putList(record);
        }
      })
    },
    //当每页显示的条数改变时触发
    sizeChange(page){
      messagePage(Object.assign({
        current: 1,// 当前页数
        size: page,// 每页显示多少条
        topicId:this.topicIdtemp,
        ascs:'send_time'
      })).then(response => {
        if (response.data.code == 0) {
          var record = response.data.data.records;
          this.page.currentPage = response.data.data.current;
          this.page.pageSize = response.data.data.size;
          this.page.total = response.data.data.total;

          this.putList(record);
        }
      })
    },
    onLoadFortabs(){
      messagePage(Object.assign({
        current: 1,// 当前页数
        size: 10,// 每页显示多少条
        topicId:this.topicIdtemp,
        ascs:'send_time'
      })).then(response => {
        if (response.data.code == 0) {
          var record = response.data.data.records;
          this.page.currentPage = response.data.data.current;
          this.page.pageSize = response.data.data.size;
          this.page.total = response.data.data.total;
          this.pagetemp = this.page;
          this.putListForpage(record);
        }
      })
    },
    putListForpage(record){
      this.msgListtemp=[];

      if(record!=null){
        this.recursive(record);    //递归消息放入消息列msgListtemp中
      }

      if(record!=null){
        this.msgDataListtemp = this.msgListtemp;
      }
    },
    //用于回复后的刷新
    refreshMessage(){
      this.$router.go(0);
    },


  }
};
</script>
<style lang="scss" scoped>
.head-title {
  color: rgb(2, 2, 2);
  text-align: left;
  display: inline;
}
.collapse-title{
  font-size:1rem;
}
.head-explain {
  color: #333;
  text-align: left;
  display: inline;
  font-size: 14px;
  margin-left: 5px;
}
.head-form {
  float: right;
  margin-right: 16px;
}
.collapse-header{
  display: inline-block;
  width: 94%;
}
.card-border {
  border: 1px solid #d2d2d2;
}
.card-header {
  background: #f5f5f5;
  height: 45px;
  line-height: 45px;
  padding: 0 10px;
  font-weight: 600;
}
.demonstration {
  font-weight: 600;
}
.consult-card {
  display: inline-block;
  margin-left: 18px;
  width: 30%;
  margin-top: 30px;
  border: 1px solid #dedbdb;
}
.consult-card-title {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  background-color: #339cdb;
  padding: 10px 10px;
  color: #fff;
}
.consult-card-content-group {
  width: 100%;
  display: flex;
}
.consult-card-content-lt {
  font-weight: 600;
  margin: auto;
  flex: 1;
}
.consult-card-content-rt {
  padding: 5px;
  border-left: 1px solid #dedbdb;
  flex: 1.5;
}
.consult-card-radio {
  padding: 10px 0;
  border-top: 1px solid #dedbdb;
}
.consult-card-radio-rt {
  display: inline-block;
  margin-left: 10px;
}
.consult-button {
  margin: 2rem 0;
  text-align: center;
}
.detail-group{
  padding: 20px;
}
.detail-data-line{
  font-size: 1rem;
}
.detail-data-label{
  display: inline-block;
  width: 140px;
  font-weight: 600;
}
.detail-data-value{
  display: inline-block;
  margin-right:12px;
  width: 200px;
}
.detail-data-file{
  display: inline-block;
  margin-left: 12px;
}
.detail-data-img{
  width: 23px;
  height:23px;
  position: relative;
  top: 6px;
}
.feedback-group {
  padding: 20px;
}

.feedback-user {
  margin-right: 6px;
  width: 95%;
}

.feedback-user-img {
  width: 21px;
  position: relative;
  top: 4px;
}

.feedback-user-text {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  margin-left: 0.2rem;
}

.feedback-user-time {
  float: right;
}

.feedback-content{
  width: 93%;
  float: right;
  height: 30px;
  line-height: 30px;
  background-color: #e8e8e8;
  border: 1px solid #d2d2d2;
  padding-left: 12px;
  margin-right: 40px;
}
.feedback-user-margin{
  width:90%;
  margin-left: 5%;
}
.feedback-margin{
  width:88%;
}

.collapse-title {
  margin-top: 2rem;
  text-align: center;
  border-top: 1px solid #dedbdb;
  border-bottom: 1px solid #dedbdb;
  margin-top: 0px;
}

.collapse-title-text {
  color: #4297dc;
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  margin-left: 0.2rem;
}

.collapse-title-img {
  width: 1.2rem;
  position: relative;
  top: 0.25rem;
}
.showall {
  padding: 10px;
  height: 120px;
  overflow: hidden;
  clear: both;
  margin-top: 6px;
}

.showall.active {
  height: auto;
  background: #fff;
  min-height: 150px;
}
.fade-enter-active {
  transition: opacity 0.9s ease-out;
}

.fade-leave-active {
  transition: opacity 0s ease-out;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

.fade1-enter-active {
  transition: opacity 0.9s ease-out;
}

.fade1-enter, .fade1-leave-to {
  opacity: 0;
}
.elheader{
    /*background-color: #4297dc;*/
    height: 30px;
    /*text-align: center;*/

  }
  .fontstyle{
    display:inline-block;
    vertical-align:middle;
  }
.deptNamestyle{
  border:0px solid #000;
  border-radius:5px;
  background-color:#4297dc;
}
.paginationcss{
  margin-top: 20px;
  float: right;
  margin-right: 28px;
}

</style>
